
/**/
/***********************************************
	-	       loader 页面加载样式            	-
***********************************************/
.loader{
    width: 100%;
    min-height: 100%;
    /*background-color: rgba(68, 176, 217, 1);*/
    background-color: rgba(255, 255, 255, 0.5);
    position: fixed;
    z-index: 200
}
.loader img {
    width: 48px;
    height: 48px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -24px;
    margin-top: -24px;
    -webkit-animation: 2s ease-in-out 0s normal none infinite rotateplane;
    animation: 2s ease-in-out 0s normal none infinite rotateplane;
}
.loader-classic
{
    width:40px;
    height:40px;
    display:inline-block;
    padding:0px;
    text-align:left;
    -webkit-animation:loader-classic 1.3s linear infinite;
    animation:loader-classic 1.3s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -20px;
    z-index: 999;
}
.loader-classic span
{
    position:absolute;
    vertical-align:top;
    border-radius:100%;
    background:#fff;
    display:inline-block;
    width:8px;
    height:8px;
    margin-left:16px;
    transform-origin:center 20px;
    -webkit-transform-origin:center 20px;
}
.loader-classic span:nth-child(2) {transform: rotate(36deg);-webkit-transform: rotate(36deg); opacity:0.1;}
.loader-classic span:nth-child(3) {transform: rotate(72deg);-webkit-transform: rotate(72deg); opacity:0.2;}
.loader-classic span:nth-child(4) {transform: rotate(108deg);-webkit-transform: rotate(108deg); opacity:0.3;}
.loader-classic span:nth-child(5) {transform: rotate(144deg);-webkit-transform: rotate(144deg); opacity:0.4;}
.loader-classic span:nth-child(6) {transform: rotate(180deg);-webkit-transform: rotate(180deg); opacity:0.5;}
.loader-classic span:nth-child(7) {transform: rotate(216deg);-webkit-transform: rotate(216deg); opacity:0.6;}
.loader-classic span:nth-child(8) {transform: rotate(252deg);-webkit-transform: rotate(252deg); opacity:0.7;}
.loader-classic span:nth-child(9) {transform: rotate(288deg);-webkit-transform: rotate(288deg); opacity:0.8;}
.loader-classic span:nth-child(10) {transform: rotate(324deg);-webkit-transform: rotate(324deg); opacity:0.9;}
@keyframes loader-classic
{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
@-webkit-keyframes loader-classic
{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

/**/
/***********************************************
	-	        引导页面加载css样式         	-
***********************************************/
/**/
*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*:focus {
    outline: none;
}
html {
    font-size: 62.5%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
    margin: 0;
    padding: 0;
    font-family: '黑体','Tahoma', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #666;
    background-color: #fff;
    overflow: hidden;
    font-size: 62.5%;
}
.app-loading{
    width: 100%;
    min-height: 100%;
    height: auto;
    margin: 0 auto;
    display: -webkit-box;
    display: block;
    overflow:hidden;
}
.page{
    display:none;
    width:100%;
    height:100%;
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
    padding: 0;
    background-color: #fff;
}
.contain{
    width:100%;
    height:100%;
    display:none;
    position:relative;
    z-index:0;
    margin: 0;
    padding: 0;
}
.current .contain,.slide .contain{
    display:block
}
.current{
    display:block;
    z-index:1
}
.slide{
    display:block;
    z-index:2
}
.swipe{
    display:block;
    z-index:3;
    transition-duration:0ms!important;
    -webkit-transition-duration:0ms!important
}

.contain h2{
    font-size:3.0rem;
    width: 100%;
    text-align: center;
    color: #0fd5b4;
    padding-top: 3.0rem;
    font-weight: normal;
    display: block;
    opacity:1;
}
.contain h2 small{
    display: block;
    font-size: 1.6rem;
    color: #92a5ab;
    text-align: center;
}

.map{
    position: relative;
    width: 22.0rem;
    height: 19.4rem;
    background: url("../images/onload-pic/map.png") center no-repeat;
    background-size: contain;
    margin: 0 auto;
    margin-top: 5rem;
}
.map span{
    position: absolute;
    display: block;
    background: url("../images/onload-pic/pro.png") no-repeat;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}
.map span.pro1{
    background-size: 320px auto;
    background-position: -33px -70px;
    left: 10px;
    top: 56px;
    width: 38px;
    height: 42px;
    -webkit-animation-duration:0.4s;
    animation-duration:0.4s;
}
.map span.pro2{
    background-size: 320px auto;
    background-position: -88px -57px;
    left: 66px;
    top: 46px;
    width: 24px;
    height: 25px;
    -webkit-animation-duration:0.6s;
    animation-duration:0.6s;
}
.map span.pro3{
    background-size: 320px auto;
    background-position: -89px -107px;
    left: 68px;
    top: 90px;
    width: 49px;
    height: 53px;
    -webkit-animation-duration:0.8s;
    animation-duration:0.8s;;
}
.map span.pro4{
    background-size: 320px auto;
    background-position: -138px -70px;
    left: 119px;
    top: 60px;
    width: 31px;
    height: 39px;
    -webkit-animation-duration:1.0s;
    animation-duration:1.0s;
}
.map span.pro5{
    background-size: 320px auto;
    background-position: -172px -11px;
    left: 139px;
    top: 0px;
    width: 46px;
    height: 51px;
    -webkit-animation-duration:1.2s;
    animation-duration:1.2s;
}
.map span.pro6{
    background-size: 320px auto;
    background-position: -164px -123px;
    left: 130px;
    top: 110px;
    width: 50px;
    height: 53px;
    -webkit-animation-duration:1.4s;
    animation-duration:1.4s;
}
.map span.pro7{
    background-size: 320px auto;
    background-position: -211px -66px;
    left: 180px;
    top: 50px;
    width: 43px;
    height: 47px;
    -webkit-animation-duration:1.2s;
    animation-duration:1.2s;
}
.map span.pro8{
    background-size: 320px auto;
    background-position: -244px -38px;
    left: 210px;
    top: 20px;
    width: 26px;
    height: 28px;
    -webkit-animation-duration:1s;
    animation-duration:1s;
}
.map span.pro9{
    background-size: 320px auto;
    background-position: -237px -145px;
    right: 20px;
    top: 130px;
    width: 40px;
    height: 45px;
    -webkit-animation-duration:1.2s;
    animation-duration:1.2s;
}
.pro-intro{
    position: relative;
    width: 24.5rem;
    height: 27.2rem;
    background: #fff url("../images/onload-pic/pro-info.png") center no-repeat;
    background-size: contain;
    margin: 0 auto;
    margin-top: 1.5rem;
}
.pro-intro .share-intro{
    width: 7.2rem;
    height: 7.4rem;
    background: url("../images/onload-pic/pro-share.png") center no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}
.pro-intro .collect-intro{
    width: 5.4rem;
    height: 5.7rem;
    background: url("../images/onload-pic/pro-collect.png") center no-repeat;
    background-size: contain;
    position: absolute;
    top: 4.6rem;
    left: 0;
    z-index: 2;
}
.pro-intro .call-intro{
    width: 3.3rem;
    height: 3.4rem;
    background: url("../images/onload-pic/pro-call.png") center no-repeat;
    background-size: contain;
    position: absolute;
    top: 16.5rem;
    right: 2.7rem;
    z-index: 2;
}
.pro-intro .free-intro{
    width: 4.7rem;
    height: 7.5rem;
    background: url("../images/onload-pic/pro-free.png") center no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 0;
    right: 5.1rem;
    z-index: 2;
}
.utility{
    width: 26.3rem;
    height: 28.9rem;
    position: relative;
    margin: 0 auto;
}
.utility-bj{
    width: 26.3rem;
    height: 28.9rem;
    background: url("../images/onload-pic/utility-bj.png") center no-repeat;
    background-size: contain;
    margin: 0 auto;
    z-index: 2;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
}
.utility-circle{
    position: absolute;
    width: 26.3rem;
    height: 28.9rem;
    background: url("../images/onload-pic/utility-crite.png") center no-repeat;
    background-size: contain;
    margin: 0 auto;
    top: 0;
    left: 0;
    z-index: 1;
}
.cloud1{
    width: 6.8rem;
    height: 7.0rem;
    background: url("../images/onload-pic/utility-text.png") center no-repeat;
    background-size: 173px auto;
    background-position: 0 0;
    position: absolute;
    top: 4.8rem;
    right: 10.6rem;
    display: block;
    z-index: 2;
}
.cloud2{
    width: 5.4rem;
    height: 5.4rem;
    background: url("../images/onload-pic/utility-text.png") center no-repeat;
    background-size: 173px auto;
    background-position: -110px -45px;
    position: absolute;
    top: 9.2rem;
    right: 1.6rem;
    display: block;
    z-index: 2;
}
.cloud3{
    width: 3.4rem;
    height: 3.4rem;
    background: url("../images/onload-pic/utility-text.png") center no-repeat;
    background-size: 173px auto;
    background-position: -139px -115px;
    position: absolute;
    top: 16.4rem;
    right: 0.5rem;
    display: block;
    z-index: 2;
}
.cloud4{
    width: 8.0rem;
    height: 4.2rem;
    background: url("../images/onload-pic/cloud-has-text.png") center no-repeat;
    background-size: contain;
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: block;
    z-index: 2;
}
.cloud5{
    width: 4.2rem;
    height: 2.3rem;
    background: url("../images/onload-pic/cloud.png") center no-repeat;
    background-size: contain;
    position: absolute;
    top: 7.2rem;
    left: 2rem;
    display: block;
    z-index: 1;
}
.cloud6{
    width: 4.2rem;
    height: 2.3rem;
    background: url("../images/onload-pic/cloud.png") center no-repeat;
    background-size: contain;
    position: absolute;
    top: 15rem;
    right: 3.5rem;
    display: block;
    z-index: 1;
}
/*底部分页数字*/
.pages-num1,.pages-num2,.pages-num3{
    width: 8.6rem;
    height: 2.4rem;
    display: block;
    margin: 0 auto;
    position: fixed;
    bottom:2.0rem;
    left: 50%;
    margin-left: -4.3rem;
    z-index:10;
}
.pages-num1{
    background: url("../images/onload-pic/page-num1.png") center no-repeat;
    background-size: 100% auto;
}
.pages-num2{
    background: url("../images/onload-pic/page-num2.png") center no-repeat;
    background-size: 100% auto;
}
.pages-num3{
    background: url("../images/onload-pic/page-num3.png") center no-repeat;
    background-size: 100% auto;
}
.open-app-btn{
    width: 12.5rem;
    height: 3.5rem;
    line-height: 3.5rem;
    display: block;
    color: #44b0d9;
    font-size: 1.6rem;
    text-align: center;
    -webkit-border-radius: 1.8rem;
    border-radius: 1.8rem;
    border:2px solid #44b0d9;
    position: fixed;
    bottom:2.0rem;
    left: 50%;
    margin-left: -6.25rem;
    z-index:10;
    font-family: "幼圆", "黑体", 'Microsoft YaHei', sans-serif;
    background-color: #fff;
}
/*动画控制 css动画库*/
.animated{
    -webkit-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both
}
.animated-delay05{
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}
.animated-delay1{
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
}
.animated-delay12{
    animation-delay: 1.2s;
    -webkit-animation-delay: 1.2s;
}
.animated-delay15{
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
}
.animated-delay2{
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
}
.animated-delay25{
    animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}
.fadeIn{
    -webkit-animation-name:fadeIn;animation-name:fadeIn
}
.fadeInScale{
    -webkit-animation-name:fadeInScale;animation-name:fadeInScale
}
.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}
.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}
.dragTop {
    -webkit-animation-name: dragTop;
    animation-name: dragTop;
}
.rotateInDownRight {
    -webkit-animation-name: rotateInDownRight;
    animation-name: rotateInDownRight;
}
@-webkit-keyframes fadeIn{
    0%{opacity:0}100%{opacity:1}
}
@keyframes fadeIn{
    0%{opacity:0}100%{opacity:1}
}
@-webkit-keyframes rotateInDownRight{
    0%{opacity:0;transform:scale(0.5);-webkit-transform:scale(0.5)}100%{opacity:1;transform:scale(1);-webkit-transform:scale(1)}
}
@keyframes fadeInScale{
    0%{opacity:0;transform:scale(0.5);-webkit-transform:scale(0.5)}100%{opacity:1;transform:scale(1);-webkit-transform:scale(1)}
}
@-webkit-keyframes fadeInScale{
    0%{opacity:0;transform:scale(0.5);-webkit-transform:scale(0.5)}100%{opacity:1;transform:scale(1);-webkit-transform:scale(1)}
}
@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -150%, 0);
        transform: translate3d(0, -150%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -150%, 0);
        transform: translate3d(0, -150%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes dragTop{
    0%{opacity:0;transform:translateY(-70px)}
    60%{opacity:1;transform:translateY(20px)}

    100%{transform:translateY(0px)}
}
@-webkit-keyframes dragTop{
    0%{opacity:0;-webkit-transform:translateY(-70px)}
    60%{opacity:1;-webkit-transform:translateY(20px)}

    100%{-webkit-transform:translateY(0px)}
}
@-webkit-keyframes rotateInDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

@keyframes rotateInDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}
@-webkit-keyframes rotateInUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;

        right: -100px;
    }

    100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

@keyframes rotateInUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
        left: -100px;
        right: -100px;
    }

    100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

.rotateInUpLeft {
    -webkit-animation-name: rotateInUpLeft;
    animation-name: rotateInUpLeft;
}
@-webkit-keyframes lightSpeedIn {
    0% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }

    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

@keyframes lightSpeedIn {
    0% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }

    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

.lightSpeedIn {
    -webkit-animation-name: lightSpeedIn;
    animation-name: lightSpeedIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}
@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}
.rotateplane {
    -webkit-animation-name: rotateplane;
    animation-name: rotateplane;
}
@-webkit-keyframes rotateplane{
    0%{-webkit-transform:perspective(120px) rotateX(0deg) rotateY(0deg)}
    25%{-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg)}
    50%{-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}
    75%{-webkit-transform:perspective(120px) rotateX(0deg) rotateY(-179.9deg)}
}
@keyframes rotateplane{
    0%{-webkit-transform:perspective(120px) rotateX(0deg) rotateY(0deg)}
    25%{-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg)}
    50%{-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}
    75%{-webkit-transform:perspective(120px) rotateX(0deg) rotateY(-179.9deg)}
}